<template>
  <div class="GykjMap-liabilityPerson">
    <div class="GykjMap-liabilityPerson-table">
      <table class="table" border>
        <tbody>
          <tr>
            <td>名字</td>
            <td>{{fliterData('name1') || fliterData('name2') || fliterData('name3') || fliterData('name4') || fliterData('name5')}}</td>
            <td>类型</td>
            <td>
              <span v-if="fliterData('name1') !== '--'">低保</span>
              <span v-if="fliterData('name2') !== '--'">三无人员</span>
              <span v-if="fliterData('name3') !== '--'">分散五保</span>
              <span v-if="fliterData('name4') !== '--'">临界低保</span>
              <span v-if="fliterData('name5') !== '--'">其他人员</span>
            </td>
          </tr>
          <tr>
          </tr>
          <tr>
            <td>家庭人数</td>
            <td>{{fliterData('family_size')}}</td>
            <td>电话</td>
            <td>{{fliterData('phone')}}</td>
          </tr>
          <tr>
            <td>鎮街</td>
            <td>{{fliterData('town')}}</td>
            <td>镇街负责人</td>
            <td>{{fliterData('town_lead')}}</td>
          </tr>
          <tr>
            <td>联系电话</td>
            <td>{{fliterData('contact_phone')}}</td>
            <td>村居</td>
            <td>{{fliterData('village')}}</td>
          </tr>
          <tr>
            <td>负责人</td>
            <td>{{fliterData('villege_leader')}}</td>
            <td>村居负责人电话</td>
            <td>{{fliterData('village—_phone')}}</td>
          </tr>
          <tr>
            <td>地址</td>
            <td>{{fliterData('address')}}</td>
            <td>易受灾类别</td>
            <td>{{fliterData('disaster_reason')}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {}
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-liabilityPerson {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  padding: 5px;
  .GykjMap-liabilityPerson-table {
    width: 100%;
    height: 100%;
    .table {
      width: 100%;
      font-size: 14px;
      border: 1px solid #ddd;
      td {
        padding: 5px;
        width: 25%;
      }
    }
  }
}
</style>
